<template>
  <div>
    <Search></Search>
    <eveningStar
      :ispagination="false"
      :showTableControl="true"
      :isTreeTable="true"
      @addNew="addNew"
      @edit="edit"
      @deltable="deltable"
      @tabselect="tabselect"
      @exportExcel="exportExcel"
      @refreshData="refreshData"
      :ableEdit="ableEdit"
      :ableDel="ableDel"
      :border="false"
      :showcheckbox="true"
      :tableData="tableData"
      :headData="headData"
    >
      <template v-slot:icon="{ row }">
        <i :class="'iconfont icon-' + row.icon"></i>
      </template>
      <template v-slot:hidden="{ row }">
        <span v-text="row.hidden ? '是' : '否'"></span>
      </template>
      <template v-slot:cache="{ row }">
        <span v-text="row.cache ? '是' : '否'"></span>
      </template>
      <template v-slot:type="{ row }">
        <span v-text="row.type ? '是' : '否'"></span>
      </template>
      <template v-slot:operation="{ row }">
        <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
        <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
      </template>
    </eveningStar>
  </div>
</template>
<script>
import { GetMenus } from "../../api/systemManage/menuApi";
import Search from "@/components/search.vue";
import eveningStar from "@/components/eveningStar.vue";
export default {
  components: { Search, eveningStar },
  data() {
    return {
      ableEdit: false,
      ableDel: false,
      tableData: [],
      headData: [
        {
          prop: "name",
          label: "菜单名称",
          width: "150",
        },
        {
          prop: "icon",
          label: "图标",
          width: "80",
          slot: true,
        },
        {
          prop: "sort",
          label: "排序",
          width: "80",
        },
        {
          prop: "path",
          label: "路由地址",
          width: "100",
        },
        {
          prop: "permission",
          label: "权限标识",
        },
        {
          prop: "component",
          label: "组件路径",
        },
        {
          prop: "hidden",
          label: "外链",
          width: "80",
          slot: true,
        },
        {
          prop: "cache",
          label: "缓存",
          width: "80",
          slot: true,
        },
        {
          prop: "type",
          label: "可见",
          width: "80",
          slot: true,
        },
        {
          prop: "createTime",
          label: "创建日期",
          width: "150",
        },
      ],
    };
  },
  mounted() {
    this.getMenuFn();
  },
  methods: {
    // 获取菜单
    getMenuFn() {
      let data = {
        page: 0,
        size: 10,
        sort: "id,desc",
      };
      GetMenus(data).then((res) => {
        this.tableData = res.content;
        console.log(this.tableData);
      });
    },
    // 新增
    addNew() {},
    // 编辑
    edit() {},
    //多选删除按钮
    deltable() {},
    // 表格多选状态变化
    tabselect(selection) {
      this.tableCheckedArr = selection;
      selection.length == 1 ? (this.ableEdit = true) : (this.ableEdit = false);
      selection.length == 0 ? (this.ableDel = false) : (this.ableDel = true);
    },
    // 导出为表格
    exportExcel() {},
    // 刷新列表
    refreshData() {},
  },
};
</script>
<style lang="less">
</style>